<template >
  <div class="container">
    <!-- <div class="testDiv" v-for="{username:name,uuid,sex,codeStr:code} in tableData" :key="uuid">
      <p>姓名：{{name ||  "空"}}</p>
      <p>uuid：{{uuid  ||  "空"}}</p>
      <p>性别：{{sex ||  "空"}}</p>
      <p>位置：{{code ||  "空"}}</p>
    </div>-->
    <v-t :topHeaderList="topHeaderList" @childFun="childFun"></v-t>
    <!-- {{tableData}} -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="uuid" align="center" label="UUID" width="180"></el-table-column>
      <el-table-column prop="username" align="center" label="账号" width="80"></el-table-column>
      <el-table-column prop="name" align="center" label="姓名" width="80"></el-table-column>
      <el-table-column prop="sex" align="center" label="性别" width="60"></el-table-column>
      <el-table-column prop="tel" align="center" label="电话" width="120"></el-table-column>
      <el-table-column prop="codeStr" align="center" label="地址"></el-table-column>
      <el-table-column label="照片" align="center">
        <template #default="scope">
          <img class="imgWH" :src="scope.row.fileUrl" alt="该用户未上传照片" fit="fill" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit( scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.uuid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import vT from "./topheader.vue";
import axios from "@/axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted, provide } from "vue";
import { useRouter } from "vue-router";
export default {
  provide: {
    zjq: ddd => {
      console.log("我是provide", ddd);
    }
  },
  components: { vT },
  setup(props) {
    let Router = useRouter();
    let tableData = ref([]);
    onMounted(() => {
      getQueryAllUserInfo();
    });
    const getQueryAllUserInfo = () => {
      axios.get("user/queryAllUserInfo").then(res => {
        res.code === "200" && (tableData.value = res.data);
        tableData.value.forEach(element => {
          element.fileUrl = element.fileUrl
            ? `http://127.0.0.1:3003/${element.fileUrl}`
            : `https://img0.baidu.com/it/u=860812239,2660557779&fm=26&fmt=auto&gp=0.jpg`;
        });
      });
    };
    const handleEdit = row => {
      // console.log(row);
      Router.push({
        path: "/home/userinfo",
        query: {
          uuid: row.uuid
        }
      });
    };
    const handleDelete = uuid => {
      ElMessageBox.confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.get("user/delUserInfo", { uuid }).then(res => {
            ElMessage(res.data.data);
            getQueryAllUserInfo();
          } ),(err)=>console.log(err)
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除"
          });
        });
    };
    let topHeaderList = [
      { name: "首页", path: "" },
      { name: "用户管理", path: "" },
      { name: "用户列表", path: "/home/userlist" }
    ];
    const childFun = data => {
      console.log("子组件传递的信息：" + data);
    };
    return { tableData, handleEdit, handleDelete, topHeaderList, childFun };
  }
};
</script>
<style lang="less" scoped>
.imgWH {
  width: 60px;
  height: 60px;
}
.testDiv {
  border: 1px solid pink;
  margin: 10px;
  font-size: 18px;
  p {
    line-height: 20px;
  }
}
</style>